<template>
  <div>
    <div class="lg:flex">
      <Avatar :src="headerImg" :size="72" class="!mx-auto !block" />
      <div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2">
        <h1 class="md:text-lg text-md" >Hi, {{ userinfo?.userName }},

       </h1>
        <div style="display: flex">
          <div v-if="getIsMobile">
            点击 左上方  `<span style="color: #cc0000" @click="toggleCollapsed">开启菜单</span>` 进入到对应菜单模块
          </div>
          <div v-if="!getIsMobile">
            开始您一天的工作吧！
          </div>
        </div>
        <Icon icon="ant-design:sync-outlined" :size="20" @click="reloadFn" />
        <span style="margin-top: 5px;color: gray;font-size: 12px;">版本号:1.0.1 | 版本更新时间:2025-10-09</span>
        <!--      <span class="text-secondary"> 今日晴，20℃ - 32℃！ </span> -->
      </div>
      <div class="flex flex-1 justify-end md:mt-0 mt-4">
        <div class="flex flex-col justify-center text-right" style="cursor: pointer" v-if="dataList.mouldWait">
          <span class="text-secondary"> 费用待处理 </span>
          <span class="text-2xl" style="color: red" @click="goMouldView">{{ dataList.mouldWait }}</span>
        </div>

        <!--      <div class="flex flex-col justify-center text-right md:mx-16 mx-12">-->
        <!--        <span class="text-secondary"> 项目 </span>-->
        <!--        <span class="text-2xl">8</span>-->
        <!--      </div>-->
        <!--      <div class="flex flex-col justify-center text-right md:mr-10 mr-4">-->
        <!--        <span class="text-secondary"> 团队 </span>-->
        <!--        <span class="text-2xl">300</span>-->
        <!--      </div>-->
      </div>
    </div>
    <div style="margin-top: 7px;margin-left:63px">
      <List :grid="{ gutter: 16, column: 4 }" :data-source="dataList2" :loading="loading" v-if="dataList2.length > 0">
        <template #renderItem="{ item }">
          <ListItem>
            <Card size="small" :title="item.title" style="cursor: pointer" @click="clickCountToFn(item)">
              <template #extra>
                <!--          <Tag :color="item.color">{{ item.action }}</Tag>-->
              </template>

              <CountTo :startVal="1" :endVal="item.value" class="text-2xl" :color="item.color" />
            </Card>

          </ListItem>
        </template>
      </List>

    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { Avatar, Tag, Card, List, ListItem } from 'ant-design-vue';
import { useUserStore } from '@/store/modules/user';
import headerImg from '@/assets/images/header.jpg';
import { waitListApi, myWaitList } from "@/api/sys/sysData";
import { useAppInject } from '@/hooks/web/useAppInject';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';

import { useMessage } from "@/hooks/web/useMessage";
import { useGo } from '@/hooks/web/usePage';
import Icon from '@/components/Icon/Icon.vue';
import { CountTo } from "@/components/CountTo";

const userStore = useUserStore();
const userinfo = computed(() => userStore.getUserInfo);
const { createMessage } = useMessage();
const go = useGo();
const { getIsMobile } = useAppInject();
const {
  toggleCollapsed
} = useMenuSetting();

onMounted(() => {
  // console.log("---props.dateObj:",props.dateObj)
  searchFn();
  waitListFn();
})
const loading = ref(false);
const dataList = ref({});
const dataList2 = ref([]);

function searchFn() {
  let data = {

  };
  waitListApi().then(res => {
    if (res.code == 200) {
      dataList.value = res.data;


    } else {
      createMessage.error(res.message);
    }
  })
}

function waitListFn() {
  loading.value = true;
  myWaitList({ page: 1, pageSize: 9, status: 0 }).then(res => {
    loading.value = false;

    if (res.code == 200) {
      dataList2.value = res.data;
    } else {
      createMessage.error(res.message);
    }
  })
}

function goMouldView() {
  go("/ms/mouldList")
}

function reloadFn() {
  window.location.reload();
}
function clickCountToFn(item) {
  console.log("----item.page::", item.page);

  go(item.page);

}

</script>
